const siteBox = {
    tabbar: document.querySelector('.tabbar'),
    allSite: document.querySelector('.all-site'),
    async setNav() {
        let nav;
        try {
            nav = await site.getSiteList();
            if (nav && nav.success) {
                nav = nav.data;
            } else {
                throw "";
            }
        } catch (err) {
            alert("网络异常！！");
            return ;
        }
    
        // 设置 tabbar 的所有 div
        for (let i = 0; i < nav.length; i++) {
            let item = nav[i];
            let newDiv = document.createElement('div');
            newDiv.innerText = item.name;
            newDiv.setAttribute('data-id', item.id);
            newDiv.addEventListener('click', () => {
                // 判断 newDiv 是否有 selected 类
                if (newDiv.classList.contains('selected')) {
                    return;
                }
                // 清除其余div的selected类
                this.tabbar.querySelectorAll('div').forEach(div => {
                    div.classList.remove('selected');
                });
                // 添加当前div的selected类
                newDiv.classList.add('selected');
                // 根据id设置页面的内容
                let id = newDiv.getAttribute('data-id');
                this.setAllSite(nav, id);
            });
            this.tabbar.appendChild(newDiv);
        }
    
        // 默认选择第一个 div
        this.tabbar.querySelector('div').click();
    },
    setAllSite(nav, id) {
        for (let i = 0; i < nav.length; i++) {
            if (nav[i].id == id) {
                // 清空站点
                this.allSite.innerHTML = '';
                // 遍历站点
                nav[i].site.forEach(site => {
                    // 创建 site 组并且 设置 组名称
                    let newSiteLine = document.createElement('div');
                    newSiteLine.classList.add('site-line');
                    let siteGroupName = document.createElement('div');
                    siteGroupName.classList.add('site-group-name');
                    siteGroupName.innerText = site.name;
                    newSiteLine.appendChild(siteGroupName);
                    // 创建每个站点组
                    let siteList = document.createElement('div');
                    siteList.classList.add('site-list');
                    site.site_list.forEach(siteItem => {
                        // 创建站点
                        let newSiteItem = document.createElement('div');
                        newSiteItem.classList.add('site-item');
                        let jmpDom = document.createElement('a');
                        jmpDom.setAttribute('href', siteItem.url);
                        jmpDom.setAttribute('target', '_blank');
                        let imgDom = document.createElement('div');
                        imgDom.classList.add('site-icon');
                        imgDom.setAttribute('style', `--icon-url: url(${siteItem.icon})`);
                        jmpDom.appendChild(imgDom);
                        let siteName = document.createElement('div');
                        siteName.classList.add('site-name');
                        siteName.innerText = siteItem.name;
                        jmpDom.appendChild(siteName);
                        newSiteItem.appendChild(jmpDom);
                        siteList.appendChild(newSiteItem);
                    });
                    newSiteLine.appendChild(siteList);
                    this.allSite.appendChild(newSiteLine);
                });
    
                // 不再继续循环
                break;
            }
        }
    }    
}